<template>
	<view class="content">
		
			<view class="article-tab"
				style="display: flex; width: 300rpx;border: 1px solid red;justify-content: center;">
				<view @click.prevent="noticeActive=1" :class="noticeActive===1?'active':''" class="tab-item">个人身份</view>
				<view @click.prevent="noticeActive=2" :class="noticeActive===2?'active':''" class="tab-item">企业身份</view>
			</view>
		
		<view class="content-block">
			<view class="fold" v-if="noticeActive==1">
				<image class="fold-img"  :src="imageUrl+'/home/manual/gr1.png'" mode="widthFix"></image>
				<image class="fold-img"  :src="imageUrl+'/home/manual/gr2.png'" mode="widthFix"></image>
				<image class="fold-img"  :src="imageUrl+'/home/manual/gr3.png'" mode="widthFix"></image>
				<image class="fold-img"  :src="imageUrl+'/home/manual/gr4.png'" mode="widthFix"></image>
				<image class="fold-img"  :src="imageUrl+'/home/manual/gr5.png'" mode="widthFix"></image>
				<image class="fold-img"  :src="imageUrl+'/home/manual/gr6.png'" mode="widthFix"></image>
			</view>
			<view class="fold" v-if="noticeActive==2">
				<image class="fold-img"  :src="imageUrl+'/home/manual/qy1.png'" mode="widthFix"></image>
				<image class="fold-img"  :src="imageUrl+'/home/manual/qy2.png'" mode="widthFix"></image>
				<image class="fold-img"  :src="imageUrl+'/home/manual/qy3.png'" mode="widthFix"></image>
				<image class="fold-img"  :src="imageUrl+'/home/manual/qy4.png'" mode="widthFix"></image>
				<image class="fold-img"  :src="imageUrl+'/home/manual/qy5.png'" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				imageUrl: '',
				noticeActive: 1,

			}
		},
		methods: {

		},
		onLoad() {
			this.imageUrl = this.globalConfig.imageUrl
	
	}
}
</script>

<style lang="scss">
	.content {
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
			.article-tab {
				height: 70rpx;
				margin: 40rpx 30%;
				box-shadow: 0px 0px 4px 3px #e5e5e5;
				border-radius: 5px;
				.tab-item{
					width: 50%;
					height: 100%;
					text-align: center;
					background-color: #fff;
					color: red;
					line-height: 70rpx;
					border-radius: 5px;
				}
				
				.tab-item.active{
					background-color: red;
					color: #fff;
				}
			}
			.content-block{
				width: calc(100% - 60rpx);
				margin: 20rpx auto;
				border-radius: 10px;
				background-color: #FFFFFF;
				.fold{
					width: 96%;
					margin: 20rpx auto;
					.fold-img{
						width: 100%;
						margin-top: 20rpx;
					}
				}
			}
		
	}
</style>
